// 1、导入index.vue组件  => Message组件
// 2、封装导出message函数
// 思路
// 1、用createVNode 将 导入的Message组件 生成 vnode
// 2、用 render 将vnode渲染到真实的dom 元素上
// 3、把真实的dom 添加到页面上
import XtxMessage from './index.vue'
import { createVNode, render } from 'vue'
// 动态生成一个dom元素
const div = document.createElement('div')
export const Message = ({ type, text }) => {
  // 生成vnode
  const VNode = createVNode(XtxMessage, { type, text })
  // 将dom元素添加到父节点上
  document.body.appendChild(div)
  // render函数 将vnode虚拟dom元素添加到自己创建的div元素标签上，然后在渲染到页面上
  render(VNode, div)
  // 2秒后，弹框组件消失
  setTimeout(() => {
    // 方式一：之间移除dom元素
    // document.body.removeChild(div)

    // 方式二：给dom元素中的内容清空 - 填充空内容
    render(null, div)
  }, 2000)
}
